<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span id="name">{{name}}</span>
        <button @click="updateName">更新</button>
        <button @click="destroy">销毁</button>
    </div>
</body>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data: {
            name:"hello"
        },
        methods: {
            updateName(){
                console.log('准备修改名字啦！')
                this.name="猪猪侠"
            },
            destroy(){
                vm.$destroy()
            }
        },
        beforeCreate() {
            //此时页面数据未初始化
            console.log('beforeCreate:'+this.name)
        },
        created() {
            //页面数据已经初始化
            console.log('created:'+this.name)
        },
        beforeMount() {
            console.log('beforeMount:'+this.name)
            console.log("html模板未更新:"+document.getElementById("name").innerText)
        },
        mounted() {
            console.log('mounted:'+this.name)
            console.log("html模版已渲染:"+document.getElementById("name").innerText)
        },
        beforeUpdate() {
            console.log('beforeUpdate:'+this.name)
            console.log("html模版未更新:"+document.getElementById("name").innerText)
        },
        updated() {
            console.log('updated:'+this.name)
            console.log("html模版已更新:"+document.getElementById("name").innerText)
        },
        beforeDestroy() {
            console.log('beforeDestory')
            console.log("销毁前:"+document.getElementById("name").innerText)
        },
        destroyed() {
            console.log('destoryed:success')
            console.log("销毁后:"+document.getElementById("name").innerText)
        },
    })
</script>
</html>